<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.8.4/umd/react.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.8.4/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
  </head>
  <body>
    <div id="test"></div>
    <script type="text/babel">
      class Dog extends React.Component {
        constructor() {
          super();
          console.log("constructor");
        }
        state = {
          opacity: 1,
          dog: "拉布拉多",
        };
        changeGift = () => {
          this.setState({
            dog: "德牧",
          });
        };
        componentWillMount() {
          console.log("componentWillMount");
        }
        static getDeriverStateFromProps() {
          console.log("getDeriverStateFromProps");
        }
        render() {
          let { opacity, dog } = this.state;
          console.log("render");
          return (
            <div>
              <h1 style={{ opacity }}>生命周期：狗</h1>
              <button onClick={this.changeGift}>点击</button>
              <Cat dogname={dog} />
            </div>
          );
        }
        componentDidMount() {
          console.log("componentDidMount");
          {
            /*setInterval(() => {
            let { opacity } = this.state;
            opacity -= 0.1;
            if (opacity <= 0) {
              opacity = 1;
            }
            this.setState({
              opacity,
            });
          }, 200);*/
          }
        }
        componentWillUnmont() {
          console.log("componentWillUnmont");
        }
      }

      class Cat extends React.Component {
        componentWillReceiveProps() {
          console.log("componentWillReceiveProps");
        }
        render() {
          return (
            <div>
              <h2>猫</h2>
              <div>父组件传递过来的：{this.props.dogname}</div>
            </div>
          );
        }
      }
      ReactDOM.render(<Dog />, document.getElementById("test"));
    </script>
  </body>
</html>
